<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.id" placeholder="用户id" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />

      <!-- <el-select v-model="listQuery.level" placeholder="代理级别"  style="width: 110px" class="filter-item">
        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
      </el-select> -->
      <!-- <el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
      </el-select>
      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select> -->
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <!-- <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        创建用户
      </el-button> -->
      <!-- <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        Export
      </el-button>
      <-->
      <!-- <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
        代理线
      </el-checkbox> -->
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="用户ID">
        <template slot-scope="scope">
          <span style="color:#1890ff;" @click="showuser(scope.row.user_id)">{{ scope.row.user_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" sortable="custom" width="170px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.ctime|formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="金额" sortable="custom"  align="center">
        <template slot-scope="{row}">
          <span>{{ row.change_account }}</span>
        </template>
      </el-table-column>
      <el-table-column label="变动类型" sortable="custom"  align="center">
        <template slot-scope="{row}">
          <span>{{ row.change_symbol }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注"  align="center">
        <template slot-scope="{row}">
          <span>{{ row.change_note}}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否积分" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.zb_type|zb_typeFn}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="变动类型" width="180px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.type_zb|type_zbfn }}</span>
        </template>
      </el-table-column> -->


    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      <el-dialog :visible.sync="czimgbig" title="用户详情" v-loading="userloading">
        <el-form >
          <el-row>
            <el-col :span="9">

              <el-form-item label="用户名">
                <el-input   v-model="userData.nickname"  />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <!-- &nbsp; -->
              <div class="" style="width:100%;height:20px;">

              </div>
            </el-col>
            <el-col :span="9">
              <el-form-item label="用户积分">
                <el-input  v-model="userData.unit" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="9">
              <el-form-item label="手机号">
                <el-input  v-model="userData.mobile"  />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <!-- &nbsp; -->
              <div class="" style="width:100%;height:20px;">

              </div>
            </el-col>
            <el-col :span="9">
              <el-form-item label="余额">
                <el-input v-model="userData.banlace"  />
              </el-form-item>
            </el-col>
          </el-row>

        </el-form >

      </el-dialog>
  </div>
</template>

<script>
const __ = {
  formatDate: (date, fmt) => {
    const padLeftZero = (str) => {
      return ('00' + str).substr(str.length)
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
    }
    for (const k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
        const str = o[k] + ''
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
      }
    }
    return fmt
  }
}
// import { fetchazbreport, fetchPv, resetpwdfn, createArticle, createuser, updateArticle } from '@/api/article'

import { getZbList } from '@/api/store'
import {  getUserInfoByOrder } from '@/api/order'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination


// arr to obj, such as { CN : "China", US : "USA" }
// const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
//   acc[cur.key] = cur.display_name
//   return acc
// }, {})

export default {
  name: 'zbreporty',
  components: { Pagination },
  directives: { waves },
  filters: {
    formatDate(time) {
      console.log(time)
      return __.formatDate(new Date(time-0), 'yyyy-MM-dd hh:mm:ss')
    },
    change_symbolFn(str){
      if(str == 'add')return '+';
      return '-';
    },
    zb_typeFn(type){
      if(type == 1)return '金额';
      return '积分';
    },
  },
  data() {
    return {
      userData: {},
      czimgbig: false,
      userloading:false,
      listQuery: {
        page: 1,
        limit: 20,
        id: undefined
      },
      listLoading: false,
      list: [],
      total: 0,
    }
  },
  created() {
    this.getList();
  },
  methods: {
    showuser(id){
      this.userloading = true;
      getUserInfoByOrder({id}).then(res=>{
        this.userData = res;
        this.czimgbig = true
        this.userloading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    getList() {
      this.listLoading = true;
      getZbList(this.listQuery).then(res => {
        this.list = res.data;
        this.total = res.count;
        this.listLoading = false;
      })
    },


  }
}
</script>
